// 定义变量
//导入  加了reference就不会编译
@import (reference) "./01.color.less";

@width: 100px;
@height: @width + 100px;

@mySelector: #warp;
@ClassSelector: .zks;
@primary-color: #4caf50;
@w: width;
div {
  width: @width;
  height: @height;
  background-color: @color;
}

@{mySelector} {
  width: @width;
  height: @height;
  background-color: @color;
  margin-top: 20px;
}

@{ClassSelector} {
  @{w}: @width;
  height: @height;
  background-color: @color;
  margin-top: 20px;
  color: red;
}

@{primary-color} {
  width: 200px;
}

// URL Variables
@images: "../img";

// Usage
body {
  color: "@{color}";
  background: url("@{images}/white-sand.png");
}

// 声明变量 需要使用函数方法调用 分离规则集
@backGround: {
  background-color: red;
};

#main {
  @backGround();
}

// 变量作用域
// Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），
// 如果找不到，则从“父”级作用域继承。

// 变量的作用域是块级的，
// 这意味着在 Less 中，变量的值是根据它们在代码中的位置来确定的，而不是根据它们被定义的位置。
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

// 变量定义变量
@zks: @zz;
@zz: block;

#z {
  display: @zks;
  content: @zz;
}
@primary: green;
@secondary: blue;

.section {
  @color: primary;
  .element {
    color: @@color;
  }
}
